<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-upload-img{
            border: 1px solid #1E9FFF;
            width: 200px;
            height: 200px;
            border-radius: 200px;;
        }
    </style>
</head>
<body>

<div style="margin: 20px" >
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="userPhoto" name="userPhoto">
        <div class="layui-form-item" style="text-align: left">
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-normal" id="checkPhoto" style="width: 200px">选择头像</a>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="photo">
                    <p id="photoText"></p>
                </div>
                <div>
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="photoProgress"  style="width: 200px">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block" style="width: 180px;">
                <input class="layui-input" name="username" autocomplete="off" placeholder="输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block" style="width: 180px;">
                <input class="layui-input" name="user" autocomplete="off" placeholder="输入用户昵称">
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">用户生日</label>-->
<!--            <div class="layui-input-block" style="width: 180px;">-->
<!--                <input class="layui-input" name="birthday" autocomplete="off">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block" style="width: 180px;">
                <input type="password" class="layui-input" name="password" autocomplete="off"
                       placeholder="不输入，默认为123456">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户手机</label>
            <div class="layui-input-block" style="width: 225px;">
                <input type="text" class="layui-input" name="phone" autocomplete="off" />
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-block" style="width: 225px;">
                <select type="text" class="layui-input" name="sex"   autocomplete="off" >
                    <option value="">请选择</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                    <option value="3">未知</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户等级</label>
            <div class="layui-input-block" style="width: 225px;">
                <select type="text" class="layui-select"  name="level"  autocomplete="off">
                    <option value="">请选择</option>
                    <option value="1">普通用户</option>
                    <option value="2">会员用户</option>
                    <option value="3">高级会员用户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-block" style="width: 225px;">
                <select type="text" class="layui-select"  name="status"  autocomplete="off">
                    <option value="">请选择</option>
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                    <option value="3">注销</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit="" lay-filter="submitBtn" id="submitBtn"></a>
            </div>
        </div>
    </form>
</div>
<script>
    var $;
    layui.use(['form','jquery','upload','element','layer'],function () {
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer,
            elem = layui.element;
        $ = layui.jquery;


        //头像上传
        var photoUpload = upload.render({
            elem:'#checkPhoto',
            url:'/file/fc/fileUpload',
            before: function (obj) {
                obj.preview(function (i,f,r) {
                    $('#photo').attr('src',r);
                });
                elem.progress('photoProgress','0%');
            },
            done:function (res) {
                if(!res.is){
                    layer.alert('上传失败，请稍后再试......')
                }else{
                    $('#userPhoto').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                elem.progress('photoProgress',n+'%');
                if(n==100){
                    layer.msg('上传完成!',{icon:1});
                }
            }
        })

        form.on('submit(submitBtn)',function (data) {
            var formData = data.field;

            $.ajax({
                type:'post',
                url:'/members/mcs/add',
                data:formData,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if(result.is){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭父页面窗口
                    }
                }
            })
        })

    })

    function btnSubmit() {
        $('#submitBtn').click();
    }
</script>

</body>
</html>

</body>
</html>